<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用 layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
    </div>
</script>
<script src="./layui/layui.js"></script>
<script>
    layui.use(function () {
        var table = layui.table;
        var $ = layui.jquery;
        //第一个实例

        table.render({
            elem: '#demo'
            , height: 312
            , url: 'http://localhost:8080/person/all' //数据接口
            , page: true //开启分页
            , toolbar: '#toolbarDemo'
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , cols: [[ //表头
                {field: 'personId', title: '人员编号', sort: true, fixed: 'left'}
                , {field: 'personName', title: '人员姓名', edit: 'text'}
                , {field: 'personArea', title: '户口所在地', sort: true, edit: 'text'}
                , {field: 'personAge', title: '人员年龄', edit: 'text'}
                , {field: 'personAddress', title: '家庭地址', width: 177, edit: 'text'}
            ]]
            , parseData: function (res) {
                console.log(res)
                return {
                    "code": 0,
                    "msg": "25",
                    "count": res.length,
                    "data": res
                }
            }
        });
        table.on('edit(test)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            let value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            console.log(JSON.stringify(data))
            $.post({
                // headers必须添加，否则会报415错误
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                url: 'http://localhost:8080/person/update',
                data: JSON.stringify(data),
            });
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
            table.reload('demo')
        });
    });
</script>
</body>
</html>